<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./css/elementUI.css" />
    <link rel="stylesheet" href="./css/article.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <title>文章页</title>
  </head>
  <body>
    <div id="article">
      <div class="tabs">
        <div
          class="tab"
          :class="activeName === '0'?'active':''"
          @click="handleClick('0')"
        >
          文化
        </div>
        <div
          class="tab"
          :class="activeName === '1'?'active':''"
          @click="handleClick('1')"
        >
          艺术
        </div>
      </div>
      <div class="search">
        <el-input placeholder="请输入标题内容" v-model="searchText"></el-input>
      </div>
      <div v-if="renderList.length">
        <div class="articleList" v-for="item in renderList" :key="item.id">
          <div class="userInfo">
            <div class="avatar">
              <img :src="item.userInfo.headPortrait" alt="" />
            </div>
            <div class="name">{{item.userInfo.name}} 发布了文章</div>
            <div class="time">{{item.writeTime}}</div>
          </div>
          <div class="article">
            <div class="cover">
              <a href="">
                <img :src="item.cover" alt="" />
              </a>
            </div>
            <div class="info">
              <div class="title">
                <a href="">{{item.title}}</a>
              </div>
              <div class="des">{{item.des}}</div>
              <div class="tag">
                <el-tag>{{item.groupid}}</el-tag>
              </div>
              <div class="cz">
                <div class="li">
                  <i class="iconfont icon-liulanliang"></i>
                  {{item.browse}}浏览量
                </div>
                <div class="li" :class="item.isThumbs?'active':''">
                  <i class="iconfont icon-dianzan"></i>
                  {{item.thumbs}}点赞
                </div>
                <div class="li">
                  <i class="iconfont icon-31pinglun"></i>
                  {{item.commens}}评论
                </div>
                <div class="li" :class="item.isCollect?'active':''">
                  <i class="iconfont icon-shoucang"></i>
                  {{item.collect}}收藏
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>

    <script>
      new Vue({
        el: '#article',
        data: {
          // 所有的文章列表
          articleList: [
            {
              id: 1,
              type: 0,
              labelid: '标签一', // 标签
              groupid: '分组', // 分组
              title: '这是文章的标题', // 游记标题
              userInfo: {
                // 文章作者信息
                id: '1',
                headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg',
                name: '用户姓名用户姓名用户姓名用户姓名',
                introduce:
                  '这是个人介绍，这是个人介绍，这是个人介绍，这是个人介绍，', // 个人介绍
              },
              writeTime: '2023-03-12 12:11:12', // 发布时间
              des: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述', // 文章描述
              browse: 102, // 浏览量
              thumbs: 12, // 点赞量
              collect: 4, // 收藏量
              isThumbs: true, // 是否点赞
              isCollect: true, // 是否收藏
              commens: 4, // 评论数量
              cover:
                'https://tse3-mm.cn.bing.net/th/id/OIP-C.nh1ql8Hr0nNJLX8viovrBgHaEK?w=296&h=180&c=7&r=0&o=5&dpr=2&pid=1.7',
            },
            {
              id: 3,
              labelid: '标签一', // 标签
              groupid: '分组', // 分组
              type: 0,
              title:
                '这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题', // 游记标题
              userInfo: {
                // 文章作者信息
                id: '1',
                headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg',
                name: '用户姓名用户姓名用户姓名用户姓名',
                introduce:
                  '这是个人介绍，这是个人介绍，这是个人介绍，这是个人介绍，', // 个人介绍
              },
              writeTime: '2023-03-12 12:11:12', // 发布时间
              des: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述', // 文章描述
              browse: 102, // 浏览量
              thumbs: 12, // 点赞量
              collect: 4, // 收藏量
              isThumbs: false, // 是否点赞
              isCollect: false, // 是否收藏
              commens: 2, // 评论数量
              cover:
                'https://tse3-mm.cn.bing.net/th/id/OIP-C.nh1ql8Hr0nNJLX8viovrBgHaEK?w=296&h=180&c=7&r=0&o=5&dpr=2&pid=1.7',
            },
            {
              id: 2,
              labelid: '标签一', // 标签
              groupid: '分组', // 分组
              type: 1,
              title:
                '这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题', // 游记标题
              userInfo: {
                // 文章作者信息
                id: '1',
                headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg',
                name: '用户姓名用户姓名用户姓名用户姓名',
                introduce:
                  '这是个人介绍，这是个人介绍，这是个人介绍，这是个人介绍，', // 个人介绍
              },
              writeTime: '2023-03-12 12:11:12', // 发布时间
              des: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述', // 文章描述
              browse: 102, // 浏览量
              thumbs: 12, // 点赞量
              collect: 4, // 收藏量
              isThumbs: true, // 是否点赞
              isCollect: true, // 是否收藏
              commens: 3, // 评论数量
              cover:
                'https://tse3-mm.cn.bing.net/th/id/OIP-C.nh1ql8Hr0nNJLX8viovrBgHaEK?w=296&h=180&c=7&r=0&o=5&dpr=2&pid=1.7',
            },
          ],
          activeName: '0',
          searchText: '',
        },
        methods: {
          handleClick: function (tab) {
            this.activeName = tab
          },
        },
        computed: {
          renderList() {
            return this.articleList.filter(
              item =>
                String(item.type) === this.activeName &&
                item.title.includes(this.searchText)
            )
          },
        },
        created() {
          // 获取文章列表
          // axios.get('/', )
        },
      })
    </script>
  </body>
</html>
